<template>
  <el-form inline ref="form" :model="form_data" class="search-container" >
    <el-form-item v-for="item in formItem" :key="item.prop" :label="item.label" :prop="item.prop" :rules="item.rules">
      <el-input v-if="item.type ==='Input'" v-model.trim="form_data[item.prop]" :placeholder="item.placeholder" :style="{width:item.width}" :disabled="item.disabled"></el-input>
      <el-select filterable v-if="item.type ==='Select'" v-model.trim="form_data[item.prop]" :placeholder="item.placeholder" :style="{width:item.width}" :disabled="item.disabled">
        <el-option v-for="i in item.options" :key="i.value || i[item.select_value]" :value="i.value || i[item.select_value]" :label="i.label || i[item.select_label]" ></el-option>
      </el-select>
      <div v-if="item.type === 'City'">
        <city-area ref="city" :cityAreaValue.sync="city_value" />
      </div>
      <div v-if="item.type === 'Keyword'" >
        <key-word ref="keyword" :options="item.options" :value.sync="keyword" />
      </div>
      <slot v-if="item.type === 'Slot'" :name="item.slotName" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch" class="btn">搜索</el-button>
      <template v-for="item in formHandler">
        <router-link class="btn" v-if="item.element ==='link'" :key="item.key" :to="item.router">
          <el-button :type="item.type" >{{item.label}}</el-button>   
        </router-link>
        <el-button class="btn" v-if="item.element === 'btn'" :key="item.key" :type="item.type" @click="item.handler && item.handler()" >{{item.label}}</el-button>   
        <!-- <el-button :key="item.key" :type="item.type" @click="item.handler && item.handler()" >{{item.label}}</el-button>    -->
      </template>
    </el-form-item>
  </el-form>
</template>

<script>
import CityArea from "@/components/common/cityArea"
import Editor from "@/components/common/editor"
import KeyWord from "@/components/common/keyWord"

export default {
  name: "SearchForm",
  props: {
    formItem:{tyoe:Array,default:()=>[]},
    formHandler:{tyoe:Array,default:()=>[]},
  },
  components: {
    CityArea,
    KeyWord
  },
  watch: {
    formItem: {
      handler(newValue) {
        this.initFormData();
        this.initFormFelid();
      },
      immediate: true
    }
  },
  data() {
    return {
      form_data: {},
      keyword: {},
      city_value: ""
    }
  },
  methods: {
    handleSearch() {
      const searchData = {};
      for(let key in this.form_data) {
        if(this.form_data[key]) {
          searchData[key] = this.form_data[key];
        }
      }
      if(this.$refs.keyword && this.keyword.key && this.keyword.value) {
        searchData[this.keyword.key] = this.keyword.value;
      }
      if(this.$refs.city && this.city_value) {
        searchData.area = this.city_value;
      }
      this.$emit("callbackComponent", {
        function: "search",
        data:searchData
      });
    },
    initFormData() {
      this.formItem.forEach((item) => {
        if(item.type === "Select") {
          this.selectOption(item);
        }
      })
    },
    initFormFelid(data) {
      const felide = {};
      this.formItem.forEach((item) => {
        if(item.prop) {
          felide[item.prop] = "";
        }
      })
      this.form_data = felide;
    },
    selectOption(data) {
      const options = this.$store.state.config[data.options];
      if(options) {
        data.options = options;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  .btn {
    margin-right:10px;
    
  }
}
</style>